<!-- 
 Description: This should render a dojo grid around any list of AR objects and allows the user
 to tweak the settings they want.

 ar_objects - The AR objects you want to put in the grid
 grid_name  - The title of the grid, defaults to class of ar object
 div_id     - Place where the grid will be inserted
 data_id    - Location of the json data used to construct the grid
 rows       - The rows that you want showing up in the grid (ordered)
 json_data  - The data corresponding to the rows, the keys must match row names
-->
<% 
   
  grid_name   = grid_name    || ar_objects.first.class.to_s
  div_id      = @div_id      || grid_name   + "GenericBrowserID"
  data_id     = data_id      || div_id + "JsonDataID"
  json_data   = json_data   || URI.escape(ar_objects.to_json(), "'") #ARRRG stupid single qoutes in the DB
  rows        = @grid_layout 
%>
<!-- Pull in our default grid css and defaults.  TODO: Improve dynamic CSS and defaults -->
<%= get_dojo_grid_defaults %>
<%= get_dojo_grid_css %>

<!-- Top level div to store the grid dom information into -->
<div id="<%=div_id%>"></div>
<input id='<%=data_id%>' type='hidden' value='<%=json_data%>'/>

<script type="text/javascript">
  //This will create a grid and insert it into the div_id you specified
  function getGenericGrid(json_data) {
     var genericRow = {type: 'dojox.GridRowView', width: '10em'};
     var layout   = {autoHeight: true,
                     autoRender: true,
                     cells: [<%= rows %>]
    };
    var layoutGeneric = [layout];

    var genericsObj  = dojo.fromJson(json_data);
    var stupid = [{name: "monkey"}];
    console.log("The Generics Object was: ", genericsObj);
    var theData   = { identifier: 'name', 
                      label: 'description',
                      items: genericsObj
    }; 
    var jsonStore    = new dojo.data.ItemFileWriteStore({data: theData});
    var genericModel   =  new dojox.grid.data.DojoData({query: {id: '*'}});
    genericModel.store = jsonStore;

    var gridProps = {
               autoWidth: true,
               autoHeight: true,
               autoRender: true,
               structure: layoutGeneric,
               model: genericModel,
    };
    var genericGrid = new dojox.Grid(gridProps);
    genericGrid.model = genericModel;
    return genericGrid;
   };

   function insertGenericGrid() {
     var generic_json = dojo.byId('<%=data_id%>').value;
     if(!generic_json) {
       console.log("There was no data to load and insert into a grid");
       return false;
     }
     genericGrid = getGenericGrid(generic_json);
     var gridNode = dojo.byId('<%=div_id%>');
     if (gridNode && gridNode) {
        gridNode.appendChild(genericGrid.domNode); 
        genericGrid.render();
     }
     else {
       console.error("Something is hosed with the grid insert, Shocking.  gridNode: ", gridNode);
     }
   }
   //Create the grid after everything is loaded and insert it into div_id
   dojo.addOnLoad(insertGenericGrid);
</script>
